import React from 'react'
import { useState,useEffect} from 'react'
import { Table ,Button,Modal,Tree} from 'antd'
import confirm from 'antd/lib/modal/confirm'
import {DeleteOutlined,EditOutlined,ExclamationCircleOutlined} from "@ant-design/icons"
import axios from 'axios'

export default function RoleList() {
  const [dataSource, setdataSource] = useState([])
  const [isModalVisible, setisModalVisible] = useState(false)
  const [rightList, setRightList] = useState([])
  const [currentRights, setcurrentRights] = useState([])
  const [currentId, setcurrentId] = useState(0)

  useEffect(()=>{
    axios.get('http://localhost:5000/roles').then(res=>{
      setdataSource(res.data)
    })
  },[])
  useEffect(() => {
    axios.get("http://localhost:5000/rights?_embed=children").then(res => {
        // console.log(res.data)
        setRightList(res.data)
    })
}, [])

  const confirmMethod = (item) => {
    confirm({
      title: "你确定要删除?",
      icon: <ExclamationCircleOutlined />,
      onOk() {
        deleteMethod(item);
      },
      onCancel() {},
    });
  };

  const deleteMethod = (item) => {
      setdataSource(dataSource.filter((data) => data.id !== item.id));
      axios.delete(`http://localhost:5000/rights/${item.id}`);
  };

  const handleOk = () =>{
    
        setisModalVisible(false)
        //同步datasource
        setdataSource(dataSource.map(item=>{
            if(item.id===currentId){
                return {
                    ...item,
                    rights:currentRights
                }
            }
            return item
        }))
        //patch

        
  }

  const handleCancel = () =>{
    setisModalVisible(false)
  }
  const onCheck = (checkKeys)=>{
    setcurrentRights(checkKeys.checked)
    
}

  const columns=[
    {
      title: "ID",
      dataIndex: "id",
      render: (id) => {
        return <b>{id}</b>;
      },
    },
    {
      title: "角色名称",
      dataIndex: "roleName",
      
    },
    {
      title: "操作",
      render: (item) => {
        return (
          <div>
            <Button
              danger
              shape="circle"
              icon={<DeleteOutlined />}
              onClick={() => confirmMethod(item)}
            />
              <Button
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
                onClick={()=>{
                  setisModalVisible(true) 
                  setcurrentRights(item.rights)
                  setcurrentId(item.id)
                } }
                
              />
          </div>
        );
      },
    },
  ]

  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey={(item)=>item.id}/>
      <Modal title="权限分配" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
      <Tree
                checkable
                checkedKeys = {currentRights}
                onCheck={onCheck}
                checkStrictly = {true}
                treeData={rightList}
            />

      </Modal>
    </div>
  )
}
